<template>
	<view class="investment_manage">
		<view class="investment_cumula">
			<view class="cumula_label" :class="index?'bg_linear_b':'bg_linear_a'" v-for="(item,index) in statisticalData" :key="index">
				<p class="cumula_value">{{item.number}}</p>
				<p class="cumula_class">{{item.title}}</p>
			</view>
		</view>
		<view class="investment_cumula">
			<view class="cumula_label" :class="index?'bg_linear_d':'bg_linear_c'" v-for="(item,index) in statistical" :key="index">
				<p class="cumula_value">{{item.number}}</p>
				<p class="cumula_class">{{item.title}}</p>
			</view>
		</view>
		<view class="investment_main">
			<uni-collapse :accordion="true" v-if="contractInfoList.length > 0" v-for="(item,index) in contractInfoList" :key="index" @change="LoadInvestmentInfo(item.investmentId)">
				<uni-collapse-item  :title="'合同名称 '+item.contractName" :showAnimation="true">
						<view class="main-list" v-for="(value,i) in investmentRecordList" :key="i">
							<view class="mian_info">
								<view>时间</view>
								<text>{{value.paymentTime}}</text>
							</view>
							<view class="mian_info">
								<view>付款</view><text>{{value.paymentMoney}}</text>
							</view>
							<view class="mian_info">
								<view>变更</view>
								<text>{{value.changeMoney}}</text>
							</view>
							<view class="mian_info">
								<view>待付</view>
								<text>{{item.unPayMoney}}</text>
							</view>
							<view class="mian_info">
								<view>附件</view>
								<text @click="downLoadInvestment(value.attachmentId)" style="color:#09AAE9">下载</text>
							</view>
						</view>
					</uni-collapse-item>
			</uni-collapse>
			<view class="mian_no_data" v-else>暂无数据</view>
		</view>
	</view>
</template>

<script>
import { getInvestments, getInvestmentsStatistics, getInvestmentsInfo } from "@/common/api/api.js"
import ipConfig from '@/utils/ipConfig.js'
	export default {
		data() {
			return {
				statisticalData:[{
					number: 0,
					title: "累计合同金额"
				},{
					number: 0,
					title: "累计支付金额"
				}],
				statistical:[{
					number: 0,
					title: "累计变更金额"
				},{
					number: 0,
					title: "累计待付金额"
				}],
				contractInfoList:[{
					contractName: "HYZ123456",
					investmentAmount: "1000",
					paymentMoney: "100",
					changeMoney: "50",
					unPayMoney: "850",
					payCount: "2021/01/01"
				}],
				investmentRecordList:[],
				page:{
					pageNo: 1,
					pageSize: 10
				}
			}
		},
		props: ['projectId'],
		mounted() {
			this.loadInvestmentList();
			this.loadInvestmentStatistics()
		},
		methods: {
			loadInvestmentList() {
				let params = this.page;
				params['projectId'] = this.projectId
				getInvestments(params).then(res=>{
					if(res.code === '20000'){
						let data = res.data.records;
						if(data.length == 0){
							uni.showToast({
								title: '暂无数据',
								icon: 'none'
							})
						}
						this.contractInfoList = data;
					}
				})
			},
			loadInvestmentStatistics(){
				getInvestmentsStatistics({projectId: this.projectId}).then(res=>{
					let data = res.data
					this.statisticalData.forEach(item=>{
						if(item.title == "累计合同金额"){
							item.number = data.investmentAmountTotal
						}
						if(item.title == "累计支付金额"){
							item.number = data.paymentMoneyTotal
						}
					})
					this.statistical.forEach(item=>{
						if(item.title == "累计变更金额"){
							item.number = data.changeMoneyTotal
						}
						if(item.title == "累计待付金额"){
							item.number = data.unPayTotal
						}
					})
				})
			},
			LoadInvestmentInfo(id) {
				getInvestmentsInfo(id).then(res=>{
					if(res.code === "20000"){
						this.investmentRecordList = res.data.recordList
					}else{
						uni.showToast({
							title: '暂无投资详细数据',
							icon: 'none'
						})
					}
				})
			},
			downLoadInvestment(attachId) {
				if(attachId) {
					uni.downloadFile({
						url: ipConfig.ip + 'admin/sys-file/getFileById?id='+attachId,
						success: function (res) {
							let filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								success: function (res) {
									console.log('打开文档成功');
								}
							});
						}
					});
				}else{
					uni.showToast({
						title: '暂无附件信息',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="less">
.investment_manage{
	position: relative;
	left: 0;
	top: 0;
	.investment_cumula{
		display: flex;
		justify-content: space-around;
		align-content: center;
		.cumula_label{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			height: 140rpx;
			margin: 10rpx;
			color: #fff;
    	border-radius: 5px;
			.cumula_value{
				width: 100%;
				text-align: center;
				font-size: 40rpx;
				padding-top: 10rpx;
			}
			.cumula_class{
				text-align: center;
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}
		}
		.bg_linear_a{
			background-image: linear-gradient(to right, #FF887C, #DF4B7E);
		}
		.bg_linear_b{
			background-image: linear-gradient(to right, #84BCD2, #725CE0);
		}
		.bg_linear_c{
			background-image: linear-gradient(to right, #F8C0EA, #9463FB);
		}
		.bg_linear_d{
			background-image: linear-gradient(to right, #FFD53C, #FA643B);
		}
	}
	.investment_main{
		position: relative;
		/deep/ .uni-collapse-cell{
			width: 95%;
			margin: 0 auto;
			background: #fff;
			box-shadow: 0 0 10rpx #bcbcbc;
			border-radius: 10rpx;
		}
		/deep/ .uni-collapse-cell__title{
			border-bottom: 1px solid #bcbcbc80;
		}
		.main-list{
			display: flex;
			justify-content: space-around;
			width: 100%;
			margin: 14rpx 0;
			.mian_info{
				color: #666666;
				font-size: 12rpx;
				text-align: center;
			}
		}
		.mian_no_data{
			width: 97%;
			height: 60rpx;
			line-height: 60rpx;
			margin: 0 auto;
			text-align: center;
			color: #09aae9;
			box-shadow: 0 0 14rpx #bcbcbc;
		}
	}
}
</style>
